<template>
	<div class="container">
		<div class="table">
			<!-- -------------------------------------------查询条件--------------------------------------------- -->	
			<el-collapse>
				<el-collapse-item style="border:solid 0.1px lightgray;" title='查询条件' name='search'>
					<el-form  label-width='80px' label-position='left'>
						<el-row>
							<el-col :span='6'>
								<el-form-item label='班级名称' prop='className'>
									<el-input  :clearable='true'></el-input>
								</el-form-item>
							</el-col> 
							<el-col :span='6' style="marginLeft:20px;">
	                            <el-button @click='' type='primary'>查询</el-button>
						        <el-button @click=''>重置</el-button>
							</el-col>
						</el-row> 
					</el-form> 
				</el-collapse-item>
			</el-collapse> 
			
			<el-table :data="tableData" stripe border style="width: 100%;margin-top:20px;">
			    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
			    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
			    <el-table-column prop="address" label="地址"> </el-table-column>
			 </el-table>
			</div>
	</div>
  
</template>

<script>
  export default {
    data() {
      return {
      	accordion:true,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>
<style type="text/css" lang="scss">
	.container{
		background-color:#fff;
		position: absolute;
		bottom:20px;
		top:50px;
		right:20px;
		left:20px;
		.table{
			margin:20px;
		}
	}
</style>